<template>
  <div class="app-container">
    <div class="top">
      <div class="left">
        <p class="top_text">重庆XX店 NO.001</p>
        <p class="desc">门店ID：1324678</p>
      </div>
      <p class="right">{{ formattedDate }}</p>
    </div>
    <div class="cont">
      <div class="cont_left">
        <div class="search">
          <el-input
            type="text"
            v-model="code"
            placeholder="请输入数字码进行核销"
          ></el-input>
          <el-button type="primary" class="btn" @click="search">搜索</el-button>
          <el-button type="" class="btn" @click="reset">重置</el-button>
        </div>
        <template v-if="showData">
          <div class="avatar_box">
            <div class="avatar_left">
              <img :src="userInfo.avatar" class="tx" alt="" />
              <div class="name_box">
                <div class="name_bg">
                  <p class="name">{{ userInfo.name }}</p>
                  <img
                    src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/vip.png"
                    class="vip_img"
                  />
                </div>
                <p class="time">
                  有效期至 {{ parseTime(userInfo.vipTime).substring(0, 10) }}
                </p>
              </div>
            </div>
            <div class="avatar_right" :class="{ error: isUser }">
              {{ !isUser ? "今日可用" : "今日不可用" }}
            </div>
          </div>
          <div class="tx_box">
            1.富侨汇会员折扣服务每日可用一次。<br />
            2.确认使用后不支持取消
          </div>
          <div v-if="!isUser">
            <img
              src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/merchant/jrky.png"
              class="img"
            />
            <el-button type="primary" class="sure_btn" @click="sureWrite"
              >确认使用折扣</el-button
            >
          </div>
          <div v-else>
            <img
              src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/merchant/jrbky.png"
              class="img"
            />
            <div class="last">
              <div class="last_time">最后一次核销信息</div>
              <div class="cont1">
                <div class="last_left space-between">
                  <div class="last_text">核销时间</div>
                  <div class="text1">{{ info.createTime }}</div>
                </div>
                <div class="last_left space-between">
                  <div class="last_text">核销门店</div>
                  <div class="text1">{{ info.shopName }}</div>
                </div>
                <div class="last_left space-between">
                  <div class="last_text">核销方式</div>
                  <div class="text1">
                    {{ info.useType == 1 ? "二维码" : "会员码" }}
                  </div>
                </div>
                <div class="last_left space-between">
                  <div class="last_text">订单ID</div>
                  <div class="text1">{{ info.code }}</div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
      <div class="cont_right">
        <el-form
          v-show="showSearch"
          ref="queryForm"
          :model="queryParams"
          size="small"
          :inline="true"
        >
          <el-form-item label="名称" prop="search">
            <el-input
              v-model="queryParams.search"
              placeholder="通过订单号、会员昵称进行模糊搜索"
              clearable
              style="width: 310px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="核销时间" prop="signTime">
            <el-date-picker
              v-model="queryParams.signTime"
              value-format="timestamp"
              :picker-options="pickerOptions"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery"
              >查询</el-button
            >
            <el-button icon="el-icon-refresh" class="delBtn" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <right-toolbar
            :show-search.sync="showSearch"
            :columns="columns"
            @queryTable="getListData"
          />
        </el-row>

        <el-table
          ref="table"
          :key="tableKey"
          v-loading="loading"
          :data="roleList"
          style="margin-top: 20px"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column
            v-if="columns[0].visible"
            key="code"
            label="订单号"
            prop="code"
            :show-overflow-tooltip="true"
            align="left"
          />
          <el-table-column
            v-if="columns[1].visible"
            key="price"
            label="核销方式"
            prop="price"
            :show-overflow-tooltip="true"
            align="left"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.useType == 1 ? "二维码" : "会员码" }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="columns[2].visible"
            key="userName"
            label="会员昵称"
            prop="userName"
            :show-overflow-tooltip="true"
            align="left"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.userName + "-" + scope.row.userId }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="columns[3].visible"
            key="createTime"
            label="核销时间"
            align="left"
            prop="createTime"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="columns[4].visible"
            key="shopName"
            label="核销门店"
            prop="shopName"
            :show-overflow-tooltip="true"
            width="250"
            align="left"
          />
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.current"
          :limit.sync="queryParams.size"
          @pagination="getListData"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getUseList, writeOff } from "@/api/index";
import { getInfo } from "@/api/login";
export default {
  name: "Verification",
  data() {
    return {
      now: new Date(),
      intervalId: null,
      code: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      columns: [
        { key: 0, label: `订单号`, visible: true },
        { key: 1, label: `核销方式`, visible: true },
        { key: 2, label: `会员昵称`, visible: true },
        { key: 3, label: `核销时间`, visible: true },
        { key: 4, label: `核销门店`, visible: true },
      ],
      tableKey: 0,
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 10,
      // 角色表格数据
      roleList: [],
      // 查询参数
      queryParams: {
        current: 1,
        size: 10,
        search: "",
        signTime: "",
      },
      isUser: false,
      showData: false,
      userInfo: "",
      info: {},
    };
  },
  computed: {
    formattedDate() {
      const options = {
        weekday: "long",
        year: "numeric",
        month: "long",
        day: "numeric",
        hour: "numeric",
        minute: "numeric",
        second: "numeric",
      };
      return this.now.toLocaleDateString("zh-CN", options);
    },
  },
  created() {
    this.intervalId = setInterval(this.updateTime, 1000);
    this.getListData();
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.$nextTick(() => {
        this.getListData();
      });
    },

    /** 查询角色列表 */
    getListData() {
      const data = {
        ...this.queryParams,
        startTime: new Date(this.queryParams.signTime[0]).getTime(),
        endTime: new Date(this.queryParams.signTime[1]).getTime(),
        shopId: 14257,
      };
      delete data.signTime;
      getUseList(data).then((response) => {
        this.roleList = response.data.records;
        this.total = response.data.total || 0;
        this.loading = false;
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.current = 1;
      this.handleQuery();
    },
    reset() {
      this.code = "";
      this.showData = false;
    },
    search() {
      if (!this.code) return this.$modal.msgError("数字码不能为空");
      getInfo({ userId: this.code.slice(0, -1) }).then((res) => {
        this.userInfo = res.data;
        this.showData = true;
      });
      getUseList({
        userId: this.code.slice(0, -1),
        size: 10,
        current: 1,
      }).then((res) => {
        if (!res.data.records.length) {
          this.isUser = false;
        }
        if (res.data.records.length) {
          this.info = res.data.records[0];
          this.isUser = this.isToday(this.info.createTime);
        }
      });
    },
    sureWrite() {
      this.$modal
        .confirm("确认使用折扣?")
        .then(() => {
          return writeOff({
            staffId: 14257,
            useCode: this.code,
            type: 2,
          });
        })
        .then(() => {
          this.resetQuery();
          this.showData = false;
          this.$modal.msgSuccess("操作成功");
        })
        .catch((error) => {
          console.log(error);
        });
    },
    isToday(timestamp) {
      const today = new Date();
      const targetDate = new Date(timestamp);

      // 比较年份、月份和日期
      return (
        today.getFullYear() === targetDate.getFullYear() &&
        today.getMonth() === targetDate.getMonth() &&
        today.getDate() === targetDate.getDate()
      );
    },
    updateTime() {
      this.now = new Date();
    },
  },
  beforeDestroy() {
    clearInterval(this.intervalId);
  },
};
</script>
<style lang="scss" scoped>
.space-between {
  display: flex;
  justify-content: space-between;
}
.last {
  margin-top: 60px;
  font-size: 14px;
  .last_time {
    color: #88909a;
  }
  .last_text {
    color: #333;
  }
  .last_text1 {
    color: #88909a;
  }
  .last_left {
    margin-top: 20px;
  }
}
.tx_box {
  margin-top: 20px;
  background: #eef0f1;
  border-radius: 5px;
  padding-left: 10px;
  color: #8b8787;
  padding-top: 12px;
  height: 60px;
  font-size: 14px;
}
.img {
  width: 80%;
  display: block;
  margin: 60px auto 0 auto;
}
.sure_btn {
  display: block;
  margin: 60px auto 0 auto;
  width: 100%;
}
.avatar_box {
  border-radius: 5px;
  width: 100%;
  height: 100px;
  background: #353a40;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  .avatar_left {
    display: flex;
    .name_bg {
      gap: 3px;
      display: flex;
      align-items: center;
    }
    .vip_img {
      width: 50px;
      margin-top: 2px;
    }
    .name_box {
      margin-left: 5px;
      margin-top: 8px;
    }
    .name {
      color: #e2c093;
      font-weight: bold;
    }
    .time {
      color: rgb(244, 211, 168, 0.8);
      font-size: 14px;
      margin-top: 3px;
    }
  }
  .tx {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid #e2c093;
  }
  .avatar_right {
    color: #e2c093;
    &.error {
      color: red;
    }
  }
}
p {
  margin: 0;
}
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90px;
  padding: 0 40px;
  background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.1) 0%,
      rgba(0, 0, 0, 0.1) 100%
    ),
    linear-gradient(267deg, #feb65e 0%, #ff6369 100%, #ff767c 100%);
  .top_text {
    font-size: 18px;
    color: #000;
    font-weight: bold;
  }
  .desc {
    margin-top: 5px;
    color: #747578;
  }
}
.right {
  font-size: 28px;
  color: #000;
  font-weight: bold;
}
.cont {
  display: flex;
  margin-top: 20px;
  width: 100%;
}
.cont_left {
  width: 400px;
  padding: 0 20px;
  height: 100%;
  border-right: 10px solid #f2f2f2;
  height: 78vh;
  .search {
    display: flex;
    justify-content: center;
    gap: 15px;
  }
}
.cont_right {
  flex: 1;
  padding-left: 20px;
}
</style>
